<template>
  <ScreenAdapter :width="1920" :height="1080">
    <div class="index">
      <div class="index_title">
        <span>疫情实时数据</span>
        <el-radio-group v-model="choose">
          <el-radio-button label="1">海外</el-radio-button>
          <el-radio-button label="2">国内</el-radio-button>
          <el-radio-button label="3">江苏</el-radio-button>
          <el-radio-button label="4">苏州</el-radio-button>
        </el-radio-group>
      </div>

      <su-zhou v-if="choose == 4"></su-zhou>
      <div class="index_map" v-if="choose == 1 || choose == 2 || choose == 3">
        <div class="first">
          <world-map v-if="choose == 1"></world-map>
          <china-map v-if="choose == 2"></china-map>
          <jiangsu-map v-if="choose == 3"></jiangsu-map>
          <suzhou-map v-if="choose == 4"></suzhou-map>
        </div>
        <div class="second">
          <div class="index_map_right">
            <div class="item">
              <div class="title">
                <span>累计确诊&nbsp;</span>
                <i class="iconfont icon-wenti"></i>
              </div>
              <h2 class="num" v-if="choose == 1">204195338</h2>
              <h2 class="num" v-else-if="choose == 2">121845</h2>
              <h2 class="num" v-else-if="choose == 3">1407</h2>
              <div class="text">
                <span>周同比</span>
                <span class="week">12% &nbsp;</span>
                <i
                  class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi"
                ></i>

                <span class="day">日环比</span>
                <span>11% &nbsp;&nbsp;</span>
                <i
                  class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy"
                ></i>
              </div>
              <div class="border"></div>
              <div class="yes_add">
                <span>昨日新增&nbsp;&nbsp;</span>
                <span v-if="choose == 1">654131</span>
                <span v-else-if="choose == 2">153</span>
                <span v-else-if="choose == 3">50</span>
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span>现有确诊&nbsp;&nbsp;</span>
                <i class="iconfont icon-wenti"></i>
              </div>
              <h2 class="num" v-if="choose == 1">23203099</h2>
              <h2 class="num" v-else-if="choose == 2">3671</h2>
              <h2 class="num" v-else-if="choose == 3">634</h2>
              <div class="ploy">
                <img src="../assets/img/11.png" alt="" />
              </div>
              <div class="border"></div>
              <div class="yes_add">
                <span>昨日新增&nbsp;&nbsp;</span>
                <span v-if="choose == 1">139572</span>
                <span v-else-if="choose == 2">75</span>
                <span v-else-if="choose == 3">47</span>
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span v-if="choose == 1 || choose == 3"
                  >累计死亡&nbsp;&nbsp;</span
                >
                <span v-else-if="choose == 2">累计境外输入&nbsp;&nbsp;</span>
                <!-- <span v-else-if="choose==3">累计死亡&nbsp;&nbsp;</span> -->
                <i class="iconfont icon-wenti"></i>
              </div>
              <h2 class="num" v-if="choose == 1">4313274</h2>
              <h2 class="num" v-else-if="choose == 2">7709</h2>
              <h2 class="num" v-else-if="choose == 3">0</h2>
              <div class="bar">
                <img src="../assets/img/22.png" alt="" />
              </div>
              <div class="border"></div>
              <div class="yes_add">
                <span>昨日新增&nbsp;&nbsp;</span>
                <span v-if="choose == 1">8156</span>
                <span v-else-if="choose == 2">35</span>
                <span v-else-if="choose == 3">0</span>
              </div>
            </div>
            <div class="item">
              <div class="title">
                <span v-if="choose == 1">死亡率</span>
                <span v-else-if="choose == 2">治愈率</span>
                <span v-else-if="choose == 3">治愈率</span>
              </div>
              <h2 class="num" v-if="choose == 1">2.1%</h2>
              <h2 class="num" v-else-if="choose == 2">98.2%</h2>
              <h2 class="num" v-else-if="choose == 3">100%</h2>
              <div class="progress">
                <img v-if="choose == 1" src="../assets/img/44.png" alt="" />
                <img
                  v-else-if="choose == 2"
                  src="../assets/img/33.png"
                  alt=""
                />
                <img
                  v-else-if="choose == 3"
                  src="../assets/img/55.png"
                  alt=""
                />
              </div>
              <div class="border"></div>
              <div class="text">
                <span>周同比</span>
                <span class="week">12% &nbsp;</span>
                <i
                  class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi"
                ></i>
                <span class="day">日环比</span>
                <span>11% &nbsp;</span>
                <i
                  class="iconfont icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="index_data" v-if="choose == 1 || choose == 2 || choose == 3">
        <div class="item">
          <abroad-yes-add v-if="choose == 1"></abroad-yes-add>
          <yes-add-ploy v-else-if="choose == 2"></yes-add-ploy>
          <jiangsu-yes-add v-else-if="choose == 3"></jiangsu-yes-add>
        </div>
        <div class="item">
          <abroad-epidemic-distribute
            v-if="choose == 1"
          ></abroad-epidemic-distribute>
          <epidemic-distribute v-else-if="choose == 2"></epidemic-distribute>
          <jiangsu-epidemic-distribute
            v-else-if="choose == 3"
          ></jiangsu-epidemic-distribute>
        </div>
        <div class="item">
          <lastest-development></lastest-development>
        </div>
      </div>
    </div>
  </ScreenAdapter>
</template>

<script>
import SuZhou from "../components/Suzhou/Suzhou.vue";

import ChinaMap from "../components/Map/ChinaMap.vue";
import JiangsuMap from "../components/Map/JiangsuMap.vue";
import SuzhouMap from "../components/Map/SuzhouMap.vue";
import WorldMap from "../components/Map/WorldMap.vue";

import YesAddPloy from "../components/Ecahrts/yes_add.vue";
import AbroadYesAdd from "../components/Ecahrts/abroad_yes_add.vue";
import JiangsuYesAdd from "../components/Ecahrts/Jiangsu_yes_add.vue";

import AbroadEpidemicDistribute from "../components/Ecahrts/abroad_epidemic_distribute.vue";
import EpidemicDistribute from "../components/Ecahrts/epidemic_distribute.vue";
import JiangsuEpidemicDistribute from "../components/Ecahrts/Jiangsu_epidemic_distribute.vue";

import LastestDevelopment from "../components/Ecahrts/lastest_development.vue";
import ScreenAdapter from "../components/common/ScreenAdapter.vue";

export default {
  components: {
    ChinaMap,
    JiangsuMap,
    SuzhouMap,
    WorldMap,
    YesAddPloy,
    AbroadYesAdd,
    JiangsuYesAdd,
    AbroadEpidemicDistribute,
    EpidemicDistribute,
    JiangsuEpidemicDistribute,
    LastestDevelopment,
    ScreenAdapter,
    SuZhou
  },
  data() {
    return {
      choose: 4
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style lang="less" scoped>
.index {
  width: 100%;
  padding: 120px 54px 20px;
}

.index_title {
  color: #24c2ff;
  margin: 10px 0;
  span {
    margin-right: 10px;
  }
}

.index_map {
  display: flex;
  .first {
    flex: 1;
    background: linear-gradient(
      180deg,
      rgba(36, 194, 255, 0.1),
      rgba(36, 194, 255, 0)
    );
    border: 3px solid #24c2ff;
    margin-right: 20px;
  }
  .second {
    flex: 1;
    .index_map_right {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 430px;
        height: 212px;
        background: linear-gradient(
          180deg,
          rgba(36, 194, 255, 0.1),
          rgba(36, 194, 255, 0)
        );
        border: 3px solid #24c2ff;
        padding: 24px 20px;
        .title {
          color: #24c2ff;
        }
        .num {
          color: #ffe600;
          font-size: 30px;
          margin: 15px 0;
        }
        .text {
          span {
            font-size: 14px;
            color: #24c2ff;
          }
          .week {
            margin: 0 8px;
          }
          .day {
            margin: 0 8px 0 110px;
          }
        }
        .border {
          width: 378px;
          height: 1px;
          margin: 20px 0 10px 0;
          background: #04130f;
        }
        .yes_add {
          color: #24c2ff;
          font-size: 14px;
        }
        &:first-child {
          margin: 0 20px 20px 0;
        }
        &:nth-child(2) {
          margin-bottom: 20px;
          .ploy {
            width: 378px;
            height: 21px;

            img {
              width: 100%;
            }
          }
        }
        &:nth-child(3) {
          margin-right: 20px;
          .bar {
            width: 378px;
            img {
              width: 100%;
            }
          }
        }
        &:last-child {
          .progress {
            width: 378px;
            height: 25px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
.index_data {
  margin-top: 20px;
  display: flex;
  .item {
    flex: 1;
    &:nth-child(2) {
      margin: 0 20px;
    }
  }
}

.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi {
  font-size: 14px;
  color: #f5222d;
}
.icon-zelvxuanzefeiyongzhengsanjiaoxingzhichi-copy {
  font-size: 14px;
  color: #52c41a;
}
</style>
